<template>
    <div class="user">
        <!--搜索表单-->
        <div class="common-seach-wrap">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="formInline.brand" placeholder="品牌名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="formInline.model" placeholder="车型名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="formInline.sort" filterable placeholder="排序方式">
                        <el-option label="品牌名称 升序" value="brand_asc"></el-option>
                        <el-option label="品牌名称 降序" value="brand_desc"></el-option>
                        <el-option label="车型数量 多到少" value="count_desc"></el-option>
                        <el-option label="车型数量 少到多" value="count_asc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getTableInfo()">搜索</el-button>
                    <el-button type="primary" icon="Plus" @click="handleInfo()">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="count-tip">当前显示: {{ tableData.length }} 个品牌 (共 {{ totalDataNumber }} 个品牌)</div>
        <div class="letter-box">
            <div class="letter-item" :class="{ 'active': item == formInline.letter }" v-for="(item, index) in letter"
                :key="index" @click="setLetter(item)">{{ item }}
            </div>
            <el-button v-if="formInline.letter" @click="setLetter('')">清除筛选</el-button>
        </div>
        <!--内容-->
        <div class="product-content">
            <div class="table-wrap">
                <div class="brand-item" v-for="b in tableData" :key="b.brand">
                    <div class="brand-info">
                        <div class="brand-left">
                            <el-avatar src="" alt="b.brand" :size="54" shape="square"
                                style="font-size: 24px;background-color: #409eff;">{{
                                    b.brand.charAt(0)
                                }}</el-avatar>
                            <div class="brand-name">{{ b.brand }}</div>
                            <el-tag type="info">{{ b.count }}款车型</el-tag>
                        </div>
                        <el-button type="primary" icon="Plus" @click="handleInfo({
                            brand: b.brand,
                            firstletter: b.models[0].firstletter
                        })">添加车型</el-button>
                    </div>
                    <el-table size="small" :data="b.models" border style="width: 100%">
                        <el-table-column prop="id" label="ID" width="80"></el-table-column>
                        <el-table-column prop="model" label="车型名称"></el-table-column>
                        <el-table-column prop="firstletter" label="首字母"></el-table-column>
                        <el-table-column prop="" label="热门车型">
                            <template #default="scope">
                                <el-switch v-model="scope.row.is_popular" :active-value="1"
                                    :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="primary" icon="Edit" @click="handleInfo(scope.row)">编辑</el-button>
                                <el-button type="danger" icon="Delete"
                                    @click="handleDelete(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!--分页-->
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                    :total="totalDataNumber"></el-pagination>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
            <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px">
                <el-form-item label="品牌名称" required prop="brand">
                    <el-input v-model="form.brand" placeholder="请输入品牌名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="品牌首字母" prop="firstletter">
                    <el-select v-model="form.firstletter" placeholder="请选择首字母">
                        <el-option v-for="item in letter" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型名称" required prop="model">
                    <el-input v-model="form.model" placeholder="请输入车型名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="年款" prop="year">
                    <el-input v-model="form.year" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="品牌图标" prop="logo_url">
                    <el-button type="primary" @click="openUpload">选择图片</el-button>
                    <div v-if="form.logo_url" class="img">
                        <img :src="form.logo_url" width="80" height="80" />
                    </div>
                    <el-text>建议上传尺寸: 80x80px, 格式: JPG/PNG, 大小不超过2MB</el-text>
                </el-form-item>
                <el-form-item label="热门车型" prop="is_popular">
                    <el-switch v-model="form.is_popular" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogClose">关闭</el-button>
                    <el-button type="primary" @click="onSubmit" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <Upload v-if="isupload" :isupload="isupload" type="image" @returnImgs="returnImgsFunc">上传图片</Upload>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { getRegionOption } from "@/api/utils";
import { getListAPi } from "@/api/carfilm/warranty";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserOption } from "@/api/user";
import { addApi, deleteApi, editApi, getBrandListAPi } from "@/api/carfilm/quote";
const loading = ref(true);
const tableData = ref<any[]>([]);
const pageSize = ref(20);
const totalDataNumber = ref(0);
const curPage = ref(1);
const dialogVisible = ref(false);
const isupload = ref(false);
const formInline = ref({
    brand: "",
    model: "",
    sort: "",
    letter: "",
});
const formRef = ref<any>();
const form = ref({
    id: 0,
    brand: "",
    model: "",
    year: "",
    firstletter: "",
    logo_url: "",
    is_popular: 0,
});
const formRules = ref({
    brand: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
    model: [{ required: true, message: "请输入车型名称", trigger: "blur" }],
});
const dialogTitle = computed(() => {
    return form.value.id > 0 ? "编辑车型" : "添加车型";
});
const letter = ref(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"]);
const search_loading = ref(false);
const search_loading2 = ref(false);
onMounted(() => {
    getTableInfo();
});
const setLetter = (letter: string) => {
    formInline.value.letter = letter;
    getTableInfo();
};
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getTableInfo();
};
const handleCurrentChange = (val: number) => {
    curPage.value = val;
    getTableInfo();
};
function getTableInfo() {
    loading.value = true;
    getBrandListAPi({
        page: curPage.value,
        limit: pageSize.value,
        ...formInline.value,
    }).then((res: any) => {
        tableData.value = res.data?.list;
        totalDataNumber.value = res.data?.total;
        loading.value = false;
    });
}
const handleInfo = (row?: any) => {
    form.value = { ...row };
    dialogVisible.value = true;
};
const dialogClose = () => {
    dialogVisible.value = false;
    form.value = {
        id: 0,
        brand: "",
        model: "",
        year: "",
        firstletter: "",
        logo_url: "",
        is_popular: 0,
    };
};
const onSubmit = () => {
    formRef.value.validate().then(async () => {
        let ref = null as any
        if (form.value.id == 0) {
            ref = await addApi(form.value);
        } else {
            ref = await editApi(form.value);
        }
        if (ref.code == 1) {
            ElMessage.success("保存成功");
            dialogClose();
            getTableInfo();
        }
        else {
            ElMessage.error(ref.msg);
        }
    });
};
/*上传*/
const openUpload = (e: any) => {
    isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
    if (e != null && e.length > 0) {
        form.value.logo_url = e[0].file_path;
    }
    isupload.value = false;
};
const handleDelete = (id: number) => {
    ElMessageBox.confirm("确认要删除该车型吗?", "警告！", {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deleteApi(id).then((res: any) => {
                getTableInfo();
                ElMessage({
                    type: "success",
                    message: "删除成功！",
                });
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "删除已取消",
            });
        });
};
</script>
<style lang="scss" scoped>
.count-tip {
    margin-top: 12px;
    color: #909399;
    font-size: 13px;
}

.letter-box {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    .letter-item {
        padding: 5px 10px;
        cursor: pointer;
        margin-right: 5px;
        border: 1px solid #d9ecff;
        border-radius: 4px;

        &.active {
            background-color: #409eff;
            color: #fff;
        }
    }
}

.brand-item {
    margin-bottom: 35px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    padding: 24px;
    transition: all .3s;

    .brand-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ebeef5;

        .brand-left {
            display: flex;
            align-items: center;

            .brand-name {
                margin: 0 15px 0 15px;
                font-size: 18px;
                font-weight: 500;
                color: #303133;
            }
        }
    }

}
</style>
